<!-- @format -->

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			h2 {
				text-align: center;
			}

			.box {
				width: 600px;
				margin: 50px auto;
				display: flex;
				font-size: 25px;
				line-height: 40px;
			}

			.qs {
				width: 450px;
				height: 40px;
				color: red;
			}

			.btns {
				text-align: center;
			}

			.btns button {
				width: 120px;
				height: 35px;
				margin: 0 50px;
			}
		</style>
	</head>

	<body>
		<h2>随机点名</h2>
		<div class="box">
			<span>名字是：</span>
			<div class="qs">这里显示姓名</div>
		</div>
		<div class="btns">
			<button class="start">开始</button>
			<button class="end">结束</button>
		</div>

		<script>
			// 1. 前期准备
			// 数据数组
			const arr = ["马超", "黄忠", "赵云", "关羽", "张飞"];
			const qs = document.querySelector(".qs");

			// 2.给开始按钮添加事件监听
			let interval = null;
			const start = document.querySelector(".start");
			start.addEventListener("click", function () {
				interval = setInterval(function () {
					qs.innerHTML = arr[Math.floor(Math.random() * arr.length)];
				}, 100);
			});

			// 3.结结束按钮的添加事件监听
			const end = document.querySelector(".end");
			end.addEventListener("click", function () {
				clearInterval(interval);
			});
		</script>
	</body>
</html>
